<template>
	<view style="width: 100%;">
		<!-- 搜索 -->
		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="goConfirm" v-model="search_text"/>
				<view class="search__box__content" v-if="!search_text">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>搜索服务</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="search_text" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="rank.length == 0" class="collection">
			<view class="collection__text">最近搜索</view>
			<image v-if="!is_clear" @click="is_clear = true" class="collection__icon" src="/static/icon/dustbin.png" />
			<view v-if="is_clear" @click="is_clear = false" class="collection__reset">完成</view>
		</view>
		<view v-if="rank.length == 0" class="content">
			<view class="content__item" v-for="(item, index) in list" :key="index">
				<text @click="getServeGetList('',item.title)" class="content__item__text">{{item.title}}</text>
				<image v-if="is_clear" @click="isClear(index)" class="content__item__img" src="/static/icon/password_icon_del.png" mode=""></image>
			</view>
		</view>
		<view class="kong" v-if="is_kong">
			<image class="kong__img" src="/static/icon/kong_icon_bg.png" mode=""></image>
			暂无收索结果
		</view>
		<view v-if="rank.length != 0" style="width: 93.1%;padding: 0 24rpx;margin-top: 12rpx;">
			<view style="width: 100%;margin-bottom: 6rpx;border-bottom: 2rpx solid #efefef;display: flex;align-items: center;justify-content: space-evenly;" v-for="(item, index) in rank" :key="index">
				<view style="width: 100%;margin: 24rpx 0;display: flex;align-items: center;">
					<image :src="item.logo" style="width: 70rpx;height: 70rpx;border-radius: 50%;margin-left: 32rpx;" mode=""></image>
					<view style="margin-left: 18rpx;display: flex;flex-direction: column;justify-content: center;">
						<text style="font-size: 30rpx;">{{item.title}}</text>
						<view>
							<text style="font-size: 24rpx;color: rgba(102,102,102,1);margin-right: 22rpx;">{{item.typeName}}</text>
							<text style="font-size: 24rpx;color: rgba(102,102,102,1);">人气&nbsp{{item.addNum}}</text>
						</view>
					</view>
				</view>
				<view @click="addService(item.id,index)" v-if="!item.add" style="width: 138rpx;height: 70rpx;border-radius: 14rpx;background-color: rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;">
					<text style="font-size: 28rpx;color: #FFFFFF;">+</text>
					<text style="font-size: 28rpx;color: #FFFFFF;">添加</text>
				</view>
				<view v-else style="width: 138rpx;height: 70rpx;border-radius: 14rpx;border:1rpx solid rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;">
					<text style="font-size: 28rpx;color: rgba(49,114,182,1);">已添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				search_text: '', //收索字段
				rank: [], //服务列表
				search_info_list: [], //结果列表
				list: [], //最近使用列表
				is_clear: false, //删除显隐
				is_kong: false, //空状态
				
			}
		},
		onLoad() {
			this.search_info_list = uni.getStorageSync('search_info')
			this.list = this.search_info_list
			console.log(this.list);
			if(!this.search_info_list) {
				this.search_info_list = [],
				this.list = []
			}
		},
		methods: {
			/**
			 * @name 搜索
			 */
			goConfirm:Debounce(
			function(){
				if(!this.search_text) {
					uni.showToast({
						title:'请输入内容',
						icon:'none',
						duration:2000
					})
				}else {
					this.getServeGetList('',this.search_text)
					let search_info = {
						title: this.search_text,
					}
					let filter_serve_info = this.search_info_list.filter((res,index) => res.title == this.search_text)
					if(this.search_info_list.length ==0 || filter_serve_info.length == 0) {
						this.search_info_list.unshift(search_info)
						if(this.search_info_list.length > 8) {
							this.search_info_list.splice(8,1)
						}
						this.list = this.search_info_list
						uni.setStorageSync('search_info',this.search_info_list)
					}
				}
			}),
			/**
			 * @name 服务列表
			 */
			getServeGetList(id,title) {
				let self = this
				self.$api.fAppServeGetList({
					typeId: id,
					title: title,
				}).then((res) => {
					console.log(res.data.result)
					self.rank = res.data.result
					if(self.rank.length == 0) {
						self.is_kong = true
					}else{
						self.is_kong = false
					}
				})
			},
			/**
			 * @name 添加服务
			 */
			addService:Debounce(
			function(id,index){
				let self = this
				self.$api.fappServeAddServe({
					serveId: id,
				}).then((res) => {
					console.log('添加成功')
					self.rank[index].add = true
					uni.$emit('index_serve')
				}).catch(e => {
					console.log(e)
      			})
			}),
			/**
			 * @name 重置
			 */
			reset() {
				this.search_text = ''
				this.rank = []
				this.is_kong = false
				
			},
			/**
			 * @name 删除
			 */
			isClear(index) {
				this.search_info_list.splice(index,1)
				uni.setStorageSync('search_info_list',this.search_info_list)
			}
		}
	}
</script>

<style lang="less">
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	.collection {
		width: 92.6%;
		margin-top: 36rpx;
		margin-left: 36upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&__text {
			font-size: 30rpx;
		}
		&__icon {
			width: 30upx;
			height: 30upx;
		}
		&__reset {
			width: 66rpx;height: 100%;font-size: 26rpx;
		}
	}
	.content {
		width: 92.6%;
		margin-top: 36rpx;
		margin-left: 36upx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		&__item {
			width: 136upx;
			height: 48upx;
			margin-left: 22rpx;
			margin-top: 22rpx;
			font-size: 28rpx;
			color: rgba(166,166,166,1);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24rpx;
			border: 1rpx solid rgba(0,0,0,0.05);
			position: relative;
			&__text {
				width: 110rpx;
				height: 40upx;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			&__img {
				width: 40rpx;
				height: 40upx;
				border-radius: 50%;
				position: absolute;
				bottom: 28rpx;
				left: 110rpx;
			}
		}
	}
	.kong {
		width: 100%;display: flex;align-items: center;flex-direction: column;position: fixed;top: 36%;
		&__img {
			width: 422rpx;height: 298rpx;
		}
	}
</style>
